<template>
  <div class="item-container">
    <div :class="['category', taskClassName]" @click="handleFolder">
      <t-icon v-if="folding" name="chevron-down" size="16" />
      <t-icon v-else name="chevron-right" size="16" />
      {{ categoryName }}
      {{ list?.length || 0 }}
    </div>
    <Transition name="fade" mode="out-in" appear>
      <div v-if="folding">
        <t-list-item
          :class="['lits-item', taskClassName]"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="task-title">
            {{ item.title || "" }}
          </div>
          <template #action>
            <todo-operation
              :status="status"
              :task="item"
              @waiting="handleWaiting"
              @pending="handlePending"
              @complete="handleComplete"
              @cancel="handleCancel"
              @delete="handleDelete"
              @detail="handleDetail"
              @clear="handleClear"
            ></todo-operation>
          </template>
        </t-list-item>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { MessagePlugin } from "tdesign-vue-next";

import { useTaskStore } from "@/store";
import todoOperation from "./todo-operation.vue";

import { ITask, TASK_STATUS } from "@/models/task";
// 任务store
const taskStore = useTaskStore();

interface IProps {
  categoryName: string;
  list: ITask[];
  status: TASK_STATUS;
}
const props = withDefaults(defineProps<IProps>(), {
  list: () => [],
  status: TASK_STATUS.WAITING,
});

const taskClassName = computed(() => {
  const statusType = new Map([
    [TASK_STATUS.WAITING, "waitting"],
    [TASK_STATUS.PENDING, "pending"],
    [TASK_STATUS.FINISHED, "finished"],
    [TASK_STATUS.CANCELED, "canceled"],
    [TASK_STATUS.DELETED, "deleted"],
  ]);

  const defaultStatusType = "";
  return statusType.get(props.status) || defaultStatusType;
});

// 折叠面板状态
const folding = ref(false);
// 折叠面板操作
const handleFolder = () => {
  folding.value = !folding.value;
};

/**
 * 点击查看详情
 * @param { ITask } task 任务详情
 */
const handleDetail = (task: ITask) => {
  taskStore.handleSetCurrentTaskDetails(task);
};

/**
 * 删除数据
 * @param { ITask } task 任务详情
 */
const handleDelete = (task: ITask) => {
  const tempTask = { ...task };
  tempTask.status = TASK_STATUS.DELETED;
  taskStore.handleUpdateTask(tempTask);
  MessagePlugin.success("删除成功");
};

/**
 * 取消任务
 * @param { ITask } task 任务详情
 */
const handleCancel = (task: ITask) => {
  const tempTask = { ...task };
  tempTask.status = TASK_STATUS.CANCELED;
  taskStore.handleUpdateTask(tempTask);
};

/**
 * 待办任务
 * @param { ITask } task 任务详情
 */
const handleWaiting = (task: ITask) => {
  const tempTask = { ...task };
  tempTask.status = TASK_STATUS.WAITING;
  taskStore.handleUpdateTask(tempTask);
};
/**
 * 完成任务
 * @param { ITask } task 任务详情
 */
const handleComplete = (task: ITask) => {
  const tempTask = { ...task };
  tempTask.status = TASK_STATUS.FINISHED;
  taskStore.handleUpdateTask(tempTask);
};

/**
 * 处理任务
 * @param { ITask } task 任务详情
 */
const handlePending = (task: ITask) => {
  const tempTask = { ...task };
  tempTask.status = TASK_STATUS.PENDING;
  taskStore.handleUpdateTask(tempTask);
};

/**
 * 处理任务
 * @param { string } id 任务主键id
 */
const handleClear = (id: string) => {
  taskStore.handleDeleteTask(id);
  // 彻底删除时，清空详情数据
  if (id === taskStore.currentTask?.id) {
    taskStore.handleSetCurrentTaskDetails({});
  }
};
</script>

<style lang="less" scoped>
.item-container {
  margin-bottom: 12px;
  .category {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--td-brand-color-2);
    border-radius: 4px;
    margin-bottom: 12px;
  }
  .lits-item {
    margin-bottom: 12px;
    border-radius: 4px;
    background: var(--td-brand-color-1);
    padding: 4px 12px;
    &.deleted {
      text-decoration-line: line-through;
    }
    .task-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  .category,
  .lits-item {
    &.waitting {
      background: var(--td-success-color-1);
    }
    &.pending {
      background: var(--td-success-color-2);
    }
    &.finished {
      background: var(--td-success-color-3);
    }
    &.canceled {
      background: var(--td-gray-color-2);
    }
    &.deleted {
      background: var(--td-gray-color-4);
    }
  }
}
</style>